<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>谷歌地图</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <style>
      /* [START maps_map_simple] */
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */


      /* Optional: Makes the sample page fill the window. */
      html,
      body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }

      #map {
        height: 100%;
        width: 100%;
      }

      /* [END maps_map_simple] */
    </style>
  </head>

  <body>
    <div id="map"></div>

    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB4y-lo0JcaAbW0C1VGSdbIKiYzjxmKCCM&callback&callback=initMap&v=weekly"
      async></script>

    <script>
      let urlParams = getUrlParams();
      // merchant  商家
      // user 用户
      console.log(' urlParams', urlParams);
      // urlParams = {
      //   merchantLngLat: "114.14553196509719,22.276955150026744", // 商家端经纬度
      //   merchantLogo: "/static/logo/png"
      //   riderLngLat: "114.14553196509719,22.276955150026744", // 骑手端经纬度
      //   riderLogo: "/static/logo/png"
      //   userLngLat: "114.14553196509719,22.276955150026744", // 用户端经纬度
      //   userLogo: "/static/logo/png",
      //   center: "rider", // 中心点是哪里  merchant rider user
      // }
      console.log(urlParams.center)
      if (!urlParams.center) {
        urlParams.center = 'merchant';
      }
      let centerLngLat = urlParams[urlParams.center + 'LngLat'];
      console.log(centerLngLat)
      // const lng = 114.14553196509719;
      // const lat = 22.276955150026744;
      let map = null;
      let marker = null;
       console.log(11111111111)

      /**
       * ! 初始化
       */
      function initMap() {
         console.log(2222)
        map = new google.maps.Map(document.getElementById("map"), {
          center: {
            lat: Number(centerLngLat.split(',')[1]),
            lng: Number(centerLngLat.split(',')[0]),
          },
          zoom: 12,
          // 启用/禁用缩放控制。默认情况下，此控件可见并显示在地图右下角附近。
          // 该 zoomControlOptions字段另外指定 ZoomControlOptions要用于此控件的 。
          zoomControl: true,
          /* 启用/禁用允许用户在地图类型（例如地图和卫星）之间切换的地图类型控件。
            默认情况下，此控件可见并显示在地图的左上角。该mapTypeControlOptions字段
            另外指定MapTypeControlOptions要用于此控件的 。*/
          mapTypeControl: false,
          /* 启用/禁用让用户激活街景全景的街景小人控件。
            默认情况下，此控件可见并显示在地图右下角附近。
            该streetViewControlOptions字段另外指定StreetViewControlOptions要用
            于此控件的 。*/
          streetViewControl: false,
          /* 启用/禁用用于控制 45° 图像方向的旋转控件的外观。
            默认情况下，控件的存在取决于当前缩放和位置下给定地图类型的
            45° 图像是否存在。您可以通过设置地图rotateControlOptions
            来指定RotateControlOptions要使用的来 改变控件的行为 。
            如果当前没有可用的 45° 图像，则无法显示该控件。*/
          rotateControl: false,
          /* 启用/禁用提供简单地图比例的比例控件。默认情况下，
            此控件不可见。启用后，它将始终显示在地图的右下角。
            该 scaleControlOptions额外指定 ScaleControlOptions用于此控制。*/
          scaleControl: false,
          /* 启用/禁用以全屏模式打开地图的控件。
            默认情况下，此控件在桌面和 Android 设备上默认启用。
            启用后，该控件会出现在地图右上角附近。
            该 fullscreenControlOptions额外指定 FullscreenControlOptions用于此控制。 */
          fullscreenControl: false,
        });
        addMarker();
      }

      /**
       * ! 添加标点
       */
      async function addMarker() {
        console.log(333)
        let {
          merchantLngLat,
          merchantLogo,
          riderLngLat,
          riderLogo,
          userLngLat,
          userLogo,
          myLngLat,
          myLogo,
          shopLngLat,
          shopLogo,

        } = urlParams;
        let icons = {};
        let features = [];
        console.log(11111111111111111)
        console.log(myLngLat)
        if (merchantLngLat) {
          icons.merchant = {
            icon: merchantLogo,
            icon: "./img/sign06.png"
            // icon: await drawAndShareImage(merchantLogo)
          }
          features.push({
            position: new google.maps.LatLng(Number(merchantLngLat.split(',')[1]), Number(merchantLngLat.split(
              ',')[0])),
            type: "merchant",
          })
        }

        if (riderLngLat) {
          icons.rider = {
            icon: riderLogo,
            icon: "./img/sign07.png"
            // icon: await drawAndShareImage(merchantLogo)
          }
          features.push({
            position: new google.maps.LatLng(Number(riderLngLat.split(',')[1]), Number(riderLngLat.split(
              ',')[0])),
            type: "rider",
          })
        }

        if (myLngLat) {
          icons.my = {
            icon: myLogo,
            // icon: "./img/sign07.png"
            // icon: await drawAndShareImage(merchantLogo)
          }
          features.push({
            position: new google.maps.LatLng(Number(myLngLat.split(',')[1]), Number(myLngLat.split(
              ',')[0])),
            type: "my",
          })
        }

        if (shopLngLat) {
          icons.my = {
            icon: shopLogo,
            // icon: "./img/sign07.png"
            // icon: await drawAndShareImage(merchantLogo)
          }
          features.push({
            position: new google.maps.LatLng(Number(shopLngLat.split(',')[1]), Number(shopLngLat.split(
              ',')[0])),
            type: "shop",
          })
        }


        // Create markers.
        for (let i = 0; i < features.length; i++) {
          const marker = new google.maps.Marker({
            position: features[i].position,
            map: map,
            icon: {
              url: icons[features[i].type].icon,
              scaledSize: new google.maps.Size(27, 32),
              // origin: new google.maps.Point(0, 0),
              // anchor: new google.maps.Point(0, 0),
            },
          });
        }

        // map.fitBounds(newBoundary);
      }

      /**
       * ! cancas 合并两张图片
       * @param {src} src 图片的路径
       * @param {type} type 背景图  merchant 商家 ; user 用户  默认 merchant
       */
      async function drawAndShareImage(src, type) {
        type = type || 'merchant';
        var canvas = document.createElement("canvas");
        var base64 = null;
        canvas.width = 752;
        canvas.height = 752;
        var context = canvas.getContext("2d");
        context.rect(0, 0, canvas.width, canvas.height);
        context.fillStyle = "rgba(255, 255, 255, 0)";
        context.fill();
        var myImage = new Image();
        myImage.src = type == 'merchant' ? "./img/2.png" : './img/2.png'; // 背景图片 你自己本地的图片或者在线图片
        myImage.crossOrigin = "Anonymous";

        await new Promise((resolve, reject) => {
          myImage.onload = function() {
            // context.drawImage(myImage, 0, 0, 700, 700);
            // context.drawImage(myImage, 0, 0, 164, 188);
            context.drawImage(myImage, 0, 0, 656, 752);
            resolve();
          };
        });

        var myImage2 = new Image();

        myImage2.src = await circle_image_v2(src); //你自己本地的图片或者在线图片

        myImage2.crossOrigin = "Anonymous";

        await new Promise((resolve, reject) => {
          myImage2.onload = function() {
            myImage2.style.borderRadius = "50%";
            context.drawImage(myImage2, 98, 100, 456, 456);
            base64 = canvas.toDataURL("image/png"); //"image/png" 这里注意一下
            resolve();
          };
        });

        return base64;
      }

      /**
       * 把图片处理成圆形,如果不是正方形就按最小边一半为半径处理
       * @param {img} img 图片路径
       * @param {number} imgType 设置生成图片的大小：
       *  0设置生成的图片大小是以图片设置的css大小为准，
       *  1设置生成的图片大小是以图片分辨率为准，默认值为0
       * @return {string} return base64 png图片字符串
       */
      async function circle_image_v2(imgSrc, imgType) {
        var img = new Image();
        img.src = imgSrc; //你自己本地的图片或者在线图片
        img.crossOrigin = "Anonymous";
        await new Promise((resolve, reject) => {
          img.onload = function() {
            resolve();
          };
          img.onerror = function(e) {
            console.log('图片加载失败 e', e);
            img.src = './img/logo.png';

            img.onload = function() {
              resolve();
            };
          }
        });

        var type = imgType || 0;
        var radius, diameter, canvas, ctx, natural;
        if (type) {
          if (img.naturalWidth > img.naturalHeight) {
            radius = img.naturalHeight / 2;
          } else {
            radius = img.naturalWidth / 2;
          }
        } else {
          if (img.width > img.height) {
            radius = img.height / 2;
          } else {
            radius = img.width / 2;
          }
          if (img.naturalWidth > img.naturalHeight) {
            natural = img.naturalHeight;
          } else {
            natural = img.naturalWidth;
          }
        }
        diameter = radius * 2;
        canvas = document.createElement("canvas");
        if (!canvas.getContext) {
          // 判断浏览器是否支持canvas，如果不支持在此处做相应的提示
          console.log("您的浏览器版本过低，暂不支持。");
          return false;
        }
        canvas.width = diameter;
        canvas.height = diameter;
        contex = canvas.getContext("2d");
        contex.clearRect(0, 0, diameter, diameter);
        contex.save();
        contex.beginPath();
        contex.arc(radius, radius, radius, 0, Math.PI * 2, false);
        contex.clip();
        if (type) {
          contex.drawImage(
            img,
            0,
            0,
            diameter,
            diameter,
            0,
            0,
            diameter,
            diameter
          );
        } else {
          contex.drawImage(
            img,
            0,
            0,
            natural,
            natural,
            0,
            0,
            diameter,
            diameter
          );
        }
        contex.restore();
        return canvas.toDataURL("image/png");
      }




      /**
       * ! 获取 url 参数
       * @params { key } key 参数如果传了则返回当前的 value 没有的话则返回所有的一个参数对象
       */
      function getUrlParams(key) {
        let s = window.location.search.slice(1);
        let a = s.split("&");
        let o = {};
        a.forEach((item) => {
          let ia = item.split("=");
          o[ia[0]] = ia[1];
        });

        if (key) {
          return o[key] || null;
        } else {
          return o;
        }
      }
    </script>
  </body>
</html>
